<template>
  <div id="Assessment">
    <!-- 标题 -->
    <div class="title-msg">
      <p>我们将根据您填写的相关信息出具一份融资建议书，选择适合的融资产品，提高融资落地效率！</p>
    </div>
    <!-- 表单容器 -->
    <form>
      <div class="input-list">
        <label class="title">
          <span>融资额度：</span>
          <span class="info" @click="showModel">
            <img src="../assets/image/wh.svg" alt />
          </span>
        </label>
        <div class="input-container">
          <input class="input" type="number" v-model="estimateReq.amount" />
        </div>
      </div>
      <div class="input-list center-list">
        <label class="title">
          <span>融资方式：</span>
        </label>
        <van-radio-group
          class="radio-style"
          v-model="estimateReq.financingType"
          direction="horizontal"
        >
          <van-radio
            v-for="(item, index) in ltdListCollection.keys0"
            :key="index"
            :name="item.key"
          >{{item.value}}</van-radio>
        </van-radio-group>
      </div>
      <div class="input-list">
        <label class="title">
          <span>企业全称：</span>
        </label>
        <div class="input-base">
          <input
            class="input"
            type="text"
            v-model="estimateReq.enterpriseName"
            placeholder="请输入企业全称"
          />
        </div>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>成立时间：</span>
        </label>
        <div @click="calendarShow = true" class="select">
          <span>{{ltdCreateTime ? ltdCreateTime : "请选择成立时间"}}</span>
        </div>
        <van-popup v-model="calendarShow" round position="bottom">
          <van-datetime-picker
            @confirm="onConfirm"
            type="date"
            title="选择年月日"
            :min-date="new Date('1995-01-01')"
            :max-date="new Date()"
          />
        </van-popup>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>企业地区：</span>
        </label>
        <div class="select" @click="showPicker = true">
          <span>{{ltdAddress ? ltdAddress : "请选择企业地区"}}</span>
        </div>
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            @confirm="onSelectConfirm"
            show-toolbar
            value-key="name"
            title="选择地区"
            :columns="cityList"
          />
        </van-popup>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>企业性质：</span>
        </label>
        <van-radio-group
          class="radio-style"
          v-model="estimateReq.enterpriseNature"
          direction="horizontal"
        >
          <van-radio
            v-for="(item, index) in ltdListCollection.keys1"
            :key="index"
            :name="item.key"
          >{{item.value}}</van-radio>
        </van-radio-group>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>法人年龄：</span>
        </label>
        <van-radio-group class="radio-style" v-model="estimateReq.age" direction="horizontal">
          <van-radio
            style="font-size:14px"
            v-for="(item, index) in ltdListCollection.keys3"
            :key="index"
            :name="item.key"
          >{{item.value}}</van-radio>
        </van-radio-group>
      </div>
      <div class="input-list center-list">
        <label class="title">
          <span>所属行业：</span>
        </label>
        <div class="select" @click="industryTypeShow = true">
          <span>{{industryTypeVal ? industryTypeVal : "请选择行业类型"}}</span>
        </div>
        <van-popup v-model="industryTypeShow" round position="bottom">
          <van-picker
            @confirm="onSelectIndustryTypeList"
            show-toolbar
            title="选择行业"
            :columns="industryTypeList"
            value-key="name"
          />
        </van-popup>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>本年度销售收入：{{estimateReq.currentYearRevenue}}万{{estimateReq.currentYearRevenue >= line.max ? "+" : ''}}</span>
        </label>
        <van-slider
          style="margin:20px 0"
          :bar-height="line.barHeight"
          v-model="estimateReq.currentYearRevenue"
          active-color="#2F54EB"
          :min="line.min"
          :max="line.max"
        >
          <template #button>
            <div class="custom-button">{{ estimateReq.currentYearRevenue }}</div>
          </template>
        </van-slider>
      </div>
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>上年度销售收入：{{estimateReq.lastYearRevenue}}万{{estimateReq.lastYearRevenue >= line.max ? '+' : ''}}</span>
        </label>
        <van-slider
          style="margin:20px 0"
          :bar-height="line.barHeight"
          v-model="estimateReq.lastYearRevenue"
          active-color="#2F54EB"
          :min="line.min"
          :max="line.max"
        >
          <template #button>
            <div class="custom-button">{{ estimateReq.lastYearRevenue }}</div>
          </template>
        </van-slider>
      </div>
      <div class="input-list center-list">
        <label class="title">
          <span>上年度开票收入：{{estimateReq.lastYearInvoiceAmount}}万{{estimateReq.lastYearInvoiceAmount >= line.max ?  "+" : ''}}</span>
        </label>
        <van-slider
          style="margin:20px 0"
          :bar-height="line.barHeight"
          v-model="estimateReq.lastYearInvoiceAmount"
          active-color="#2F54EB"
          :min="line.min"
          :max="line.max"
        >
          <template #button>
            <div class="custom-button">{{ estimateReq.lastYearInvoiceAmount }}</div>
          </template>
        </van-slider>
      </div>
      <!-- 
        是否有不动产：
      -->
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>是否有不动产：</span>
        </label>
        <van-radio-group
          class="radio-style isRadio"
          v-model="estimateReq.hasRealEstate"
          direction="horizontal"
        >
          <van-radio :name="true">是</van-radio>
          <van-radio :name="false">否</van-radio>
        </van-radio-group>

        <div class="input-children" v-if="estimateReq.hasRealEstate">
          <label class="title">
            <span>不动产评估价值：</span>
          </label>
          <van-radio-group
            class="radio-style radio-group"
            v-model="estimateReq.realEstateVal"
            direction="horizontal"
          >
            <van-radio
              :name="item.key"
              :style="index == 2 ? 'margin-top:10px' : ''"
              v-for="(item, index) in ltdListCollection.keys4"
              :key="index"
            >{{item.value}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <!-- 
        是否有设备：
      -->
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>是否有设备：</span>
        </label>
        <van-radio-group
          class="radio-style isRadio"
          v-model="estimateReq.hasEquipment"
          direction="horizontal"
        >
          <van-radio :name="true">是</van-radio>
          <van-radio :name="false">否</van-radio>
        </van-radio-group>

        <div class="input-children" v-if="estimateReq.hasEquipment">
          <label class="title">
            <span>设备价值：</span>
          </label>
          <van-radio-group
            class="radio-style radio-group"
            v-model="estimateReq.equipmentVal"
            direction="horizontal"
          >
            <van-radio
              :name="item.key"
              :style="index == 2 ? 'margin-top:10px' : ''"
              v-for="(item, index) in ltdListCollection.keys5"
              :key="index"
            >{{item.value}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <!-- 
        是否有专利：
      -->

      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>是否有专利：</span>
        </label>
        <van-radio-group
          class="radio-style isRadio"
          v-model="estimateReq.hasPatent"
          direction="horizontal"
        >
          <van-radio :name="true">是</van-radio>
          <van-radio :name="false">否</van-radio>
        </van-radio-group>

        <div class="input-children" v-if="estimateReq.hasPatent">
          <label class="title">
            <span>专利数：</span>
          </label>
          <van-radio-group
            class="radio-style radio-group"
            v-model="estimateReq.patentVal"
            direction="horizontal"
          >
            <van-radio
              :name="item.key"
              v-for="(item, index) in ltdListCollection.keys6"
              :key="index"
            >{{item.value}}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <!-- 
        是否有设备： 
      -->
      <div class="input-list center-list" style="border-bottom: 0; padding-bottom: 10px !important">
        <label class="title">
          <span>是否有股权抵押：</span>
        </label>
        <van-radio-group
          class="radio-style isRadio"
          v-model="estimateReq.hasSharePledge"
          direction="horizontal"
        >
          <van-radio :name="true">是</van-radio>
          <van-radio :name="false">否</van-radio>
        </van-radio-group>
        <!-- 
          预留抵押下面的选项
          2020年08月04日11:42:00
          
          <div class="input-children">
            <label class="title">
              <span>专利数：</span>
            </label>
            <van-radio-group class="radio-style isRadio" v-model="CeoAgeVal" direction="horizontal">
              <van-radio :name="1">5个以内</van-radio>
              <van-radio :name="2">5个-10个</van-radio>
              <van-radio :name="3">10个以上</van-radio>
            </van-radio-group>
          </div> 
        -->
      </div>
      <!-- 提交了 -->
      <div class="submit-btn">
        <van-button type="primary" @click.prevent="postForms" color="#2F54EB" block>提交</van-button>
      </div>
    </form>
  </div>
</template>

<script>
import {
  RadioGroup,
  DatetimePicker,
  Radio,
  Cell,
  Picker,
  Popup,
  Slider,
  Button,
  Dialog,
} from "vant";
import { getCity, getIndustryTree } from "api/Enterprise";
import { getLtdType } from "api/User";
import { financingEstimates } from "api/Home";

export default {
  name: "Assessment",
  data() {
    return {
      line: {
        barHeight: 6,
        min: 10,
        max: 4000,
      },
      cityList: [],
      ltdCreateTime: "",
      ltdAddress: "",
      industryTypeVal: "",
      calendarShow: false,
      showPicker: false,
      industryTypeShow: false,
      industryTypeList: [],
      ltdListCollection: {},
      estimateReq: {
        currentYearRevenue: 10,
        lastYearRevenue: 10,
        lastYearInvoiceAmount: 10,
      },
    };
  },
  methods: {
    postForms() {
      console.log(this.estimateReq);
      let {
        age,
        amount,
        areaCode,
        cityCode,
        lastYearInvoiceAmount,
        currentYearRevenue,
        enterpriseName,
        enterpriseNature,
        establishDate,
        financingType,
        industryCode,
        provinceCode,
        hasRealEstate,
        hasEquipment,
        hasPatent,
      } = this.estimateReq;

      if (
        age &&
        amount &&
        areaCode &&
        cityCode &&
        lastYearInvoiceAmount &&
        currentYearRevenue &&
        enterpriseName &&
        enterpriseNature &&
        establishDate &&
        financingType &&
        industryCode &&
        provinceCode
      ) {
        if (!hasRealEstate) {
          delete this.estimateReq.realEstateVal;
        }

        if (!hasEquipment) {
          delete this.estimateReq.equipmentVal;
        }

        if (!hasPatent) {
          delete this.estimateReq.patentVal;
        }

        financingEstimates(this.estimateReq).then(({ code, data, message }) => {
          if (!code) {
            this.$toast("提交成功");
            this.$router.push("/report/" + data.uuid);
          } else {
            this.$toast(message);
          }
        });
      } else {
        this.$toast("请填写所有的输入框在进行提交！");
      }
    },
    formatDate(date) {
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${date.getFullYear()}-${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      }`;
    },
    onConfirm(date) {
      this.calendarShow = false;
      this.ltdCreateTime = this.formatDate(date);
      this.estimateReq.establishDate = this.formatDate(date);
    },
    onSelectConfirm(value, index) {
      this.ltdAddress = value.join("/");

      let arr = [];
      function removeCityChildren(list) {
        if (Object.prototype.toString.call(list) == "[object Array]") {
          list.forEach((el) => {
            switch (el.name) {
              case value[0]:
                arr.push(el.code);
                break;
              case value[1]:
                arr.push(el.code);
                break;
              case value[2]:
                arr.push(el.code);
                break;
            }
            removeCityChildren(el.children);
          });
        }
      }

      removeCityChildren(this.cityList);
      arr = arr.splice(0, 3);

      this.estimateReq.areaCode = arr[2];
      this.estimateReq.cityCode = arr[1];
      this.estimateReq.provinceCode = arr[0];

      this.showPicker = false;
    },
    onSelectIndustryTypeList(value, index) {
      this.industryTypeList.map((item,index)=>{
        if(item.name==value[0]){
          item.children.map((item1,index1)=>{
            if(item1.name === value[1]){
      this.industryTypeVal = item1.name;
      this.industryTypeShow = false;
      this.estimateReq.industryCode = item1.code;
            }
          })
        }
      })

    },
    getIndustry() {
      getIndustryTree().then(({ data }) => {
        data.industryTreeList.forEach((el) => {
          el.children.forEach(el2=>{
            delete el2.children;
          })
        });
        this.industryTypeList = data.industryTreeList;
      });
    },
    getCitys() {
      // 获取城市选择
      getCity().then(({ data }) => {
        // 递归删除城市最后的空选项
        function removeCityChildren(list) {
          list.forEach((el) => {
            if (!el.children.length) delete el.children;
            else removeCityChildren(el.children);
          });
        }

        removeCityChildren(data.areaTree);
        this.cityList = data.areaTree;
      });
    },
    showModel() {
      Dialog.alert({
        title: "名词解释",
        message: `
          <div><span style="font-weight:bold">融资方式：</span>融资方式是指企业融通资金的具体形式。融资方式越多意味着可供企业选择的融资机会就越多。它可以分为两类：债务性融资和权益性融资。前者包括银行贷款、发行债券和应付票据、应付账款等，后者主要指股票融资。</div>
          <div><span style="font-weight:bold">股权融资：</span>股权融资是指企业的股东愿意让出部分企业所有权，通过企业增资的方式引进新的股东，同时使总股本增加的融资方式。股权融资所获得的资金，企业无须还本付息，但新股东将与老股东同样分享企业的赢利与增长。</div>
          <div><span style="font-weight:bold">个体工商户：</span>个体工商户是工商业经济在中小微的表现，与大型企业比较，如同幼狮和雄狮一般，个体工商户发展的好，就会成为大中型企业，后者如果收缩即为回归个体工商户。</div>
          <div><span style="font-weight:bold">企业性质：</span>企业性质一般包括国有企业、集体所有制企业、联营企业、三资企业、私营企业。</div>`,
      });
    },
  },
  mounted() {
    Promise.all([
      getLtdType({ code: "financing_type" }), // 融资方式
      getLtdType({ code: "enterprise_nature" }), //企业性质
      getLtdType({ code: "corporate_age" }), //企业性质
      getLtdType({ code: "corporate_age" }), //行业
      getLtdType({ code: "real_property" }), // 不动产
      getLtdType({ code: "device_value" }), // 设备值
      getLtdType({ code: "patent_num" }), // 专利数
    ]).then((res) => {
      res.forEach((el, index) => {
        if (!el.data.code) {
          this.$set(this.ltdListCollection, "keys" + index, el.data);
        } else {
          this.$toast(`Promise.all 第${index + 1}个请求失败，请排查`);
        }
      });
      this.getCitys();
      this.getIndustry();
    });
  },
  components: {
    "van-radio-group": RadioGroup,
    "van-radio": Radio,
    "van-cell": Cell,
    "van-picker": Picker,
    "van-popup": Popup,
    "van-slider": Slider,
    "van-button": Button,
    "van-datetime-picker": DatetimePicker
  },
};
</script>

<style lang="stylus" scoped>
@import '../assets/styl/mixin.styl'
#Assessment
  .title-msg
    background-color #F7F7F7
    p
      padding rem(15)
      color #666
      line-height rem(20)
  form
    .input-list
      padding rem(10) rem(15)
      .input-children
        margin-top rem(20)
        .isRadio
          .van-radio
            margin-bottom rem(10)
    .center-list
      padding-bottom rem(25) !important
      border-bottom rem(10) solid #f7f7f7
      .select
        border rem(1) solid #ccc
        width 100%
        line-height rem(40)
        box-sizing border-box
        padding 0 rem(10)
        padding-right rem(90)
        font-size rem($ft16)
        margin-top rem(15)
        position relative
        &::before
          content ''
          position absolute
          top 50%
          right rem(20)
          transform translateY(-50%)
          background url('../assets/image/select-icon.png') no-repeat center center
          background-size 100% 100%
          width rem(15)
          height rem(9)
    .title
      font-size rem(14)
      font-weight bold
      color #333
      display flex
      justify-content space-between
      align-items center
      .info
        img
          width rem(23)
          height rem(23)
    .input-container, .input-base
      position relative
      &::before
        content '万元'
        position absolute
        top 50%
        transform translateY(-50%)
        right rem(20)
        font-size rem($ft16)
      .input
        display block
        border rem(1) solid #ccc
        width 100%
        line-height rem(40)
        box-sizing border-box
        padding 0 rem(10)
        padding-right rem(90)
        font-size rem($ft16)
        margin-top rem(15)
    .radio-style, .isRadio
      margin-top 0.4rem
      display flex
      justify-content space-between
      font-size 0.426667rem
      >>> .van-radio__icon--checked+span
        color #2F54EB
      >>> .van-radio__icon--checked
        .van-icon
          background-color #2F54EB
          border-color #2F54EB
    .isRadio
      justify-content flex-start
      .van-radio
        margin-right rem(100)
      .radio-group
        margin-right 0 !important
    .input-base
      input
        padding-right 0 !important
      &::before
        display none
    .custom-button
      width rem(30)
      color #fff
      font-size rem(10)
      line-height rem(18)
      text-align center
      background-color #2F54EB
      border-radius rem(100)
    .submit-btn
      box-sizing border-box
      padding rem(20)
>>> .van-slider
  width: 90%;
  margin: 20px auto !important;
</style>